<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="blog-post-demo">
		<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
	</div> 
<script>
	Vue.component("blog-post",{
		props: ['post'],
		template: '<div class="blog-post"><h3>{{post.title}}</h3><div v-html="post.content"></div></div>',
		}
	);
	new Vue({
		el:"#blog-post-demo",
		data: {
			posts:[
				{id:1, title:'My journey with Vue1', content:'cc'},
				{id:2, title:'Blogging with Vue2', content:'ddc'},
				{id:3, title:'Why Vue is so fun3', content:'ee'},
			]
		}
	});
</script>
</body>
